import React, {useEffect, useState} from "react";

import {createStyles} from "antd-style"
import SystemInfoApi, {DiskInfo} from "@/api/web/SystemInfoApi.ts";
import useAppState from "@/store/AppState.ts";
import {Collapse} from "antd";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            width: 100%;

            .title {
                display: block;
                text-align: center;
                margin: 10px auto;
                font-size: 18px;
                font-weight: 600;
            }
        `,
        contentHeader: css`
            font-size: 17px;
        `,
        contentBody: css`
            p {
                display: flex;
                text-align: left;
                span {
                    margin-left: auto;
                }
            }
        `,
    }
})

const DiskInfoCard: React.FC = () => {
    const styles = useStyles().styles;
    const width = useAppState(state => state.width)
    const [diskInfoList, setDiskInfoList] = useState<DiskInfo[]>([])

    useEffect(() => {
        SystemInfoApi.getDiskInfo().then(res => {
            setDiskInfoList(res.data)
        })
    }, []);

    if (diskInfoList == null || diskInfoList.length == 0) {
        return (
            <></>
        )
    }

    return (
        <div className={styles.container}>
            <h3 className="title">磁盘信息</h3>
            <Collapse
                ghost
                items={diskInfoList.map(item => {
                    return {
                        key: item.name,
                        label: item.model,
                        classNames: {
                            header: styles.contentHeader,
                            body: styles.contentBody,
                        },
                        children: <>
                            <p>名称<span>{item.name}</span></p>
                            <p>型号<span>{item.model}</span></p>
                            <p>序列号<span>{item.serial}</span></p>
                            <p>容量<span>{(item.size / 1024 / 1024 / 1024).toFixed(4) + "GB"}</span></p>
                            <p>写入的数据总量<span>{(item.writeBytes / 1024 / 1024 / 1024).toFixed(4) + "GB"}</span></p>
                            <p>写入的次数<span>{item.writes}</span></p>
                            <p>读取的数据总量<span>{(item.readBytes / 1024 / 1024 / 1024).toFixed(4) + "GB"}</span></p>
                            <p>读取的次数<span>{item.reads}</span></p>
                            <ul className="partition-info">{
                                item.partitions.map(p => (
                                    <li key={p.identification}>
                                        <p>分区名称<span>{p.name}</span></p>
                                        <p>分区标记<span>{p.identification}</span></p>
                                        <p>挂载点<span>{p.mountPoint}</span></p>
                                        <p>大小<span>{p.size}</span></p>
                                        <p>类型<span>{p.type}</span></p>
                                        <p>UUID<span>{p.uuid}</span></p>
                                    </li>
                                ))
                            }</ul>
                        </>,
                    }
                })}
            />
        </div>
    )
}

export default DiskInfoCard
